<template>
  <el-dialog
    v-model="conf.visible"
    :title="form.name + '权限'"
    width="60%"
    draggable
    :before-close="hide"
  >
    <el-form :model="form" size="small" ref="form" :rules="rules">
      <el-form-item>
        <el-select
          v-model="form.sys_id"
          style="width: 300px"
          @change="loadMenus"
          clearable
          placeholder="请选择系统"
        >
          <el-option
            v-for="item in system_list"
            :key="item.value"
            :label="item.name"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
    </el-form>
    <el-tree
      v-if="menus.length > 0"
      :data="menus"
      node-key="id"
      :props="props"
      show-checkbox
      default-expand-all
      ref="tree"
    >
      <template #default="{ node, data }">
        <span class="tree-node">
          <span :class="data.enable == 0 ? 'label' : 'label text-disabled'"
            ><i :class="data.icon"></i> {{ node.label }}</span
          >
        </span>
      </template>
    </el-tree>
    <div v-if="menus.length == 0">
      <el-empty description="无" @click="add(form)"> </el-empty>
    </div>
    <template #footer>
      <span class="dialog-footer" v-if="menus.length > 0">
        <el-button @click="hide">取消</el-button>
        <el-button type="primary" @click="save">提交</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      conf: {
        visible: false,
      },
      form: { sys_id: "7" },
      menus: [],
      checkMenus: [],
      system_list: this.$theia.enum.get("system_info"),
      props: {
        children: "children",
        label: "name",
      },
    };
  },
  methods: {
    show(fm) {
      this.conf.visible = true;
      this.form = fm;
      this.form.sys_id =
        this.system_list && this.system_list.length > 0
          ? this.system_list[0].value
          : 0;
      console.log("form:", this.form);
      this.loadMenus();
    },
    loadMenus(v) {
      this.menus = [];
      let that = this;
      this.$theia.http
        .get("/systemmenu/listbysys", this.form)
        .then((res) => {
          that.menus = res;
          that.loadRoleMenus();
        })
        .catch((res) => {
          let code = res.response.status;
          let msg = `获取菜单失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
    loadRoleMenus() {
      this.checkMenus = [];
      let that = this;
      this.$theia.http
        .get("/systemmenu/listbyrole", this.form)
        .then((res) => {
          that.checkMenus = res;
          that.$refs.tree.setCheckedNodes(res);
        })
        .catch((err) => {
          let code = res.response.status;
          let msg = `获取菜单失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },

    save() {
      let nodes = this.$refs.tree.getCheckedNodes();
      if (nodes.length == 0) {
        return;
      }
      let ids = [];
      nodes.forEach((n) => {
        ids.push(n.id);
      });
      let nform = {
        sys_id: this.form.sys_id,
        ids: ids.join(","),
        role_id: this.form.role_id,
      };
      let that = this;
      this.$theia.http
        .get("/systemmenu/savemenubyrole", nform)
        .then(() => {
          that.$notify.success({
            title: "成功",
            message: "角色权限保存成功",
            duration: 5000,
          });
          that.conf.visible = false;
        })
        .catch((res) => {
          let code = res.response.status;
          let msg = `角色权限保存失败(${code})`;
          that.$notify.error({ title: "失败", message: msg, duration: 5000 });
        });
    },
    hide() {
      this.conf.visible = false;
      this.menus = [];
      this.checkMenus = [];
    },
  },
};
</script>


<style>
.tree-node {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.89rem;
}
.tree-node .label {
  padding-right: 40px;
}
.tree-node span i {
  margin-right: 15px;
  font-size: 1rem;
}
</style>